<template>
  <div class="common-layout">
    <el-page-header>
      <template #breadcrumb>
        <!-- <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: './page-header.html' }"> homepage </el-breadcrumb-item>
          <el-breadcrumb-item><a href="./page-header.html">route 1</a></el-breadcrumb-item>
          <el-breadcrumb-item>route 2</el-breadcrumb-item>
        </el-breadcrumb> -->
      </template>
      <template #content>
        <div class="flex items-center">
          <el-avatar
            class="mr-3"
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <!-- <span class="text-large font-600 mr-3"> Title </span> -->
          <span class="text-sm mr-2" style="color: var(--el-text-color-regular)"> 个人主页</span>
          <el-icon><Message /></el-icon>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button>收件箱</el-button>
          <el-button type="primary" class="ml-2" @click="goToRequest">任务生成</el-button>
        </div>
      </template>
    </el-page-header>
  </div>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-sub-menu index="1">
      <template #title>任务查看</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>领导审批</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>结果反馈</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>历史任务</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>回复</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <!-- <router-view></router-view> -->
  <!-- 
  <Request></Request> -->
  <!-- <tempalte>
    <el-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-scrollbar>
    
  </tempalte> -->
  <el-empty description="description" />
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

export default {
  setup() {
    const router = useRouter()

    const goToRequest = () => {
      router.push('/Request')
    }

    return {
      goToRequest
    }
  }
}
</script>
